<?php
    require('conn.cfg.php');
    require('functions.php');
    $msg = '';        
    $discountTotal = 0;
    $order_total = 0;
    $sh_total = 0;
    
    if(isset($_SESSION['cart']) && is_array($_SESSION['cart'])){
        $order_total = get_order_total();
        $discountTotal = get_discount_total();
        $sh_total = get_sh_total();
    }else{
        header("Location: index.html");
    }
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>X2PERFORMANCE :: Checkout</title>
<link rel="stylesheet" href="assets/css/reset.css" />
<link rel="stylesheet" href="assets/css/text.css" />
<link rel="stylesheet" href="assets/css/960.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/general.css" />
<link rel="stylesheet" href="assets/css/master.css" />
<link rel="SHORTCUT ICON" href="favicon.ico"/>
<script type="text/javascript" src="assets/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="assets/js/kickstart.js"></script>
<script type="text/javascript" src="assets/js/script00.js"></script>
<script type="text/javascript" src="assets/js/skimlink.js"></script>
<script type="text/javascript" src="assets/js/jquery.cycle.js"></script>
<script type="text/javascript" src="assets/js/slideshow.js"></script>
<script type="text/javascript" src="assets/js/keyval.js"></script>
<link rel="stylesheet" href="assets/css/coda-slider.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="assets/js/jquery_002.js" type="text/javascript"></script>
<script src="assets/js/jquery_003.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="assets/js/coda-slider.js" type="text/javascript" charset="utf-8"></script>-->

<!--[if IE 7]>
	<style>
    #bottle{ margin-left:-335px;}
    #nav {height:45px;}
    #nav li { display: inline;margin-bottom:8px;}
    </style>
<![endif]-->
<!-- CuFon: Enables smooth pretty custom font rendering. 100% SEO friendly. To disable, remove this section -->
<script type="text/javascript" src="assets/js/cufon-yui.js"></script>
<script type="text/javascript" src="assets/js/PT_Sans_400-PT_Sans_700-PT_Sans_italic_400-PT_Sans_italic_700.font.js"></script>
<script type="text/javascript" src="assets/js/cuf_run.js"></script>
<!-- CuFon ends -->
</head>
<body>
    
<div  id="header">
  <div class="container_16">
    <noscript>
    <div class="alert"> In order to be able to view this website, Javascript needs to be active in your web browser. </div>
    </noscript>
    <div class="grid_8"> <a id="logo" href="index.html" title="X2 Performance"></a> </div>
    <div class="grid_3"> <a id="nsf" href="http://nsfsport.com/listings/certified_detail.asp?id=707999" title="NSF Certified for Sport" target="_blank"></a> </div>
    <div class="grid_5" id="topnavigation">
      <ul id="topnav">
        <!--<li><a href="">Login</a></li>
         <li><a>|</a></li>
        <li><a href="">Register</a></li>-->
        <li><span class="viewcart"></span><a href="x2cart.php">View cart</a></li>
      </ul>
    </div>
    <div class="clear"></div>
    <div class="grid_16" id="navigation">
      <ul id="nav">
        <li class="current_page_item"><a href="index.html" class="home homeactive">Home</a></li>
        <li><a href="about_us.html" class="aboutcompany">About Us</a></li>
        <li><a href="services.html" class="x2performance">X<sup>2</sup>PERFORMANCE</a></li>
        <li><a href="sport.html" class="sportcertified">Sportcertified</a></li>
        <li><a href="contact_us.html" class="contact">Contact Us</a></li>
        <li><a href="blog.html" class="blog">Blog</a></li>
      </ul>
      <!--ul class="order">
        <li><a href="order_now.html" class="ordernow">Order now</a></li>
      </ul-->
    </div>
  </div>
</div>
<div class="container_16">
  <div class="grid_16 innerheader">
    <div class="innerheaderbg"></div>
    <h2>Checkout</h2>
  </div>
  <div class="clear"></div>  
  
  <script language="javascript">
      var globalShipAddressType = 0;      
      function authenticatedUser(){
          var email = $("#loginPaneEmailAddress");
          email.removeClass("error_highlight");
          var pwd = $("#loginPanePassword");
          pwd.removeClass("error_highlight");
          
          $("#loginPaneLoginError").text("");
          
          if (email.val().length < 1 || pwd.val().length < 1){
              $("#loginPaneLoginError").text("Email or password is empty");
              return false;
          }
          
          return true;
      }
      
      function validateEmail(fieldid, noticeid){
		//testing regular expression
                var email = $("#" + fieldid);
                var notice = $("#" + noticeid);
		var a = email.val();
		var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
		//if it's valid email
		if(filter.test(a)){                        
                    return true;
		}
		//if it's NOT valid
		else{
                    email.addClass("error_highlight");
                    notice.text("Invalid e-mail address");			
                    return false;
		}
	}
      
      function validateShipAddress(){
          var fname             = $("#shipFirstName");
          fname.removeClass("error_highlight");
          var fname_error       = $("#shipFirstName_error");
          var lname             = $("#shipLastName");
          lname.removeClass("error_highlight");
          var lname_error       = $("#shipLastName_error");
          var shipAddress1      = $("#shipAddress1");
          shipAddress1.removeClass("error_highlight");
          var shipAddress1_error = $("#shipAddress1_error");
          var shipCity          = $("#shipCity");
          shipCity.removeClass("error_highlight");
          var shipCity_error    = $("#shipCity_error");
          var shipState         = $("#shipState");
          shipState.removeClass("error_highlight");
          var shipState_error   = $("#shipState_error");
          var shipPostalCode    = $("#shipPostalCode");
          shipPostalCode.removeClass("error_highlight");
          var shipPostalCode_error = $("#shipPostalCode_error");
          var shipHomePhone     = $("#shipHomePhone");
          shipHomePhone.removeClass("error_highlight");
          var shipHomePhone_error = $("#shipHomePhone_error");          
          
          //reset error message
          fname_error.text("");
          lname_error.text("");
          shipAddress1_error.text("");
          shipCity_error.text("");
          shipState_error.text("");
          shipPostalCode_error.text("");
          shipHomePhone_error.text("");          
          
          if(fname.val().length < 1){
              fname.addClass("error_highlight");
              fname_error.text("Please enter your First Name");
              return false;
          }else if(lname.val().length < 1){
            lname.addClass("error_highlight");
            lname_error.text("Please enter your Last Name");
            return false;
          }else if(shipAddress1.val().length < 1){
              shipAddress1.addClass("error_highlight");
              shipAddress1_error.text("Please enter your Street Address");
              return false;
          }else if(shipCity.val().length < 1){
              shipCity.addClass("error_highlight");
              shipCity_error.text("Please enter your City");                
              return false;
          }else if(shipState.val() == ""){
              shipState.addClass("error_highlight");
              shipState_error.text("Please enter the State of your address");              
              return false;
          }else if(shipPostalCode.val().length < 1){
              shipPostalCode.addClass("error_highlight");
              shipPostalCode_error.text("Please enter the Zip Code of your address");                
              return false;
          }else if(shipHomePhone.val().length < 1){
              shipHomePhone.addClass("error_highlight");
              shipHomePhone_error.text("Please enter your phone number");                
              return false;
          }
          
          return true;
      }
      
    function validateBillAddress(){
          var fname             = $("#billFirstName");
          fname.removeClass("error_highlight");
          var fname_error       = $("#billFirstName_error");
          var lname             = $("#billLastName");
          lname.removeClass("error_highlight");
          var lname_error       = $("#billLastName_error");
          var billAddress1      = $("#billAddress1");
          billAddress1.removeClass("error_highlight");
          var billAddress1_error = $("#billAddress1_error");
          var billCity          = $("#billCity");
          billCity.removeClass("error_highlight");
          var billCity_error    = $("#billCity_error");
          var billState         = $("#billState");
          billState.removeClass("error_highlight");
          var billState_error   = $("#billState_error");
          var billPostalCode    = $("#billPostalCode");
          billPostalCode.removeClass("error_highlight");
          var billPostalCode_error = $("#billPostalCode_error");
          var billHomePhone     = $("#billHomePhone");
          billHomePhone.removeClass("error_highlight");
          var billHomePhone_error = $("#billHomePhone_error");
          var billEmailAddress = $("#billEmailAddress");
          billEmailAddress.removeClass("error_highlight");
          var billEmailAddress_error = $("#billEmailAddress_error");
          var billConfirmEmail  = $("#billConfirmEmail");
          billConfirmEmail.removeClass("error_highlight");
          var billConfirmEmail_error = $("#billConfirmEmail_error");
          
          //reset error message
          fname_error.text("");
          lname_error.text("");
          billAddress1_error.text("");
          billCity_error.text("");
          billState_error.text("");
          billPostalCode_error.text("");
          billHomePhone_error.text("");
          billEmailAddress_error.text("");
          billConfirmEmail_error.text("");
          
          if(fname.val().length < 1){
              fname.addClass("error_highlight");
              fname_error.text("Please enter your First Name");
              return false;
          }else if(lname.val().length < 1){
            lname.addClass("error_highlight");
            lname_error.text("Please enter your Last Name");
            return false;
          }else if(billAddress1.val().length < 1){
              billAddress1.addClass("error_highlight");
              billAddress1_error.text("Please enter your Street Address");
              return false;
          }else if(billCity.val().length < 1){
              billCity.addClass("error_highlight");
              billCity_error.text("Please enter your City");                
              return false;
          }else if(billState.val() == ""){
              billState.addClass("error_highlight");
              billState_error.text("Please enter the State of your address");              
              return false;
          }else if(billPostalCode.val().length < 1){
              billPostalCode.addClass("error_highlight");
              billPostalCode_error.text("Please enter the Zip Code of your address");                
              return false;
          }else if(billHomePhone.val().length < 1){
              billHomePhone.addClass("error_highlight");
              billHomePhone_error.text("Please enter your phone number");                
              return false;
          }else if(!validateEmail("billEmailAddress","billEmailAddress_error")){              
              return false;
          }else if(billConfirmEmail.val() != billEmailAddress.val()){
              billConfirmEmail.addClass("error_highlight");
              billConfirmEmail_error.text("your confirm Email is not equal");                
              return false;
          }
          
          return true;
      }
      
      function updateBillingAddress(){
          var billAddrViewPaneData = $("#billAddrViewPaneData");
          var addData = $("#billFirstName").val() + " " + $("#billLastName").val() + "</br>";
          addData = addData + $("#billAddress1").val() + "</br>";
          addData = addData + $("#billCity").val() + "</br>";
          addData = addData + $("#billState").val() + " " + $("#billPostalCode").val() + "</br>";
          addData = addData + $("#billHomePhone").val() + "</br>";
          addData = addData + $("#billEmailAddress").val() + "</br>";
          billAddrViewPaneData.html(addData);
      }
      
      function updateShippingAddress(){
        var shipAddrViewPaneData = $("#shipAddrViewPaneData");
        var addData = $("#shipFirstName").val() + " " + $("#shipLastName").val() + "</br>";
        addData = addData + $("#shipAddress1").val() + "</br>";
        addData = addData + $("#shipCity").val() + "</br>";
        addData = addData + $("#shipState").val() + " " + $("#shipPostalCode").val() + "</br>";
        addData = addData + $("#shipHomePhone").val() + "</br>";
        addData = addData + $("#billEmailAddress").val() + "</br>";
        shipAddrViewPaneData.html(addData);
          
      }
      
      function validateCC(){
          var payMethodPaneCardNumber = $("#payMethodPaneCardNumber");
          var payMethodPaneCardNumber_error = $("#payMethodPaneCardNumber_error");
          var payMethodPaneCVV_error = $("#payMethodPaneCVV_error");
          payMethodPaneCardNumber_error.text("");
          payMethodPaneCVV_error.text("");          
          var payMethodPaneCVV = $("#payMethodPaneCVV");          
          
          if(payMethodPaneCardNumber.val().length < 1){
              payMethodPaneCardNumber.addClass("error_highlight");
              payMethodPaneCardNumber_error.text("Credit Card number is required");
              return false;
          }else if(isNaN(payMethodPaneCardNumber.val())){
              payMethodPaneCardNumber.addClass("error_highlight");
              payMethodPaneCardNumber_error.text("Credit Card number must be numbers");
              return false;
          }else if(payMethodPaneCardNumber.val().length < 13 || payMethodPaneCardNumber.val().length > 16){
              payMethodPaneCardNumber.addClass("error_highlight");
              payMethodPaneCardNumber_error.text("Credit card number must have between 13 and 16 digits.");
              return false;
          }else if(payMethodPaneCVV.val().length < 1 || isNaN(payMethodPaneCVV.val())){              
              payMethodPaneCVV_error.text("Please enter the 3-4 digits verification number printed on your credit card.  This number is required to proceed with your order.  Please note, only numbers may be entered in this field.  If you do not want to use this credit card on this order, you may select another credit card or payment method.");
              return false;
          }
          
          return true;
      }
      
     function updatePaymentMethod(){
         var payMethViewPaneData = $("#payMethViewPaneData");
         var selectCC = $('input:radio[name=payMethodPaneCardType]:checked').val();
         switch(selectCC){
            case "visa":
                selectCC = "Visa Card"; break;
            case "mc":
                selectCC = "Visa Card"; break;
            case "amex":
                selectCC = "American Express"; break;
            case "jcb":
                selectCC = "Japan Credit Bureau"; break;
            case "disc":    
                selectCC = "Discover Card"; break;
            case "dc":
                selectCC = "Diners Club"; break;
        }

         var selectExpiredMonth = $("#payMethodPaneExpireMonth").val();
         var selectExpiredYear = $("#payMethodPaneExpireYear").val();
         var payMethodPaneCardNumber = $("#payMethodPaneCardNumber").val();
		 payMethodPaneCardNumber = "####-#####-###-" + payMethodPaneCardNumber.substring(payMethodPaneCardNumber.length - 4);
         payMethViewPaneData.html(selectCC + " " + selectExpiredMonth + "/" + selectExpiredYear + "</br>" + payMethodPaneCardNumber);
     }
    function billPaneClick(){
        $("#billAddressPane_idle").hide();
        $("#billAddressPane_edit").hide();
        $("#billAddressPane_view").show();

        updateBillingAddress();

        $("#shipAddressPane_edit").show();    
        $("#shipAddressPane_idle").hide();
        $("#shipAddressPane_view").hide();
    }
    function shipPaneClick(){            
        $("#shipAddressPane_edit").hide();    
        $("#shipAddressPane_idle").hide();
        $("#shipAddressPane_view").show();

        updateShippingAddress();

        $("#paymentMethodPane_edit").show();
        $("#paymentMethodPane_idle").hide();
        $("#paymentMethodPane_view").hide();
    }     
     function closeAddressVerificationPanel(){
        $("#addressVerification_panel").remove();
        $("#addressVerification_panel_overlayBG").remove();         
     }
     
     function useOrigialAddress(){
        $("#addressVerification_panel").remove();
        $("#addressVerification_panel_overlayBG").remove();
        shipPaneClick();
     }
     
     function editAddressVerificationPanel(){
        $("#addressVerification_panel").remove();
        $("#addressVerification_panel_overlayBG").remove();
        //billPaneClick();
        if(globalShipAddressType == 0){
            $("#shipPaneNewShipAddress").show();  
            $("#shipPaneShipToNewAddress").attr("checked", "checked");
            globalShipAddressType = 1;
        }
     }
     
     function useAddressVerificationPanel(sugadd, sugcity, sugstate, sugzipcode){
        $("#addressVerification_panel").remove();
        $("#addressVerification_panel_overlayBG").remove();
        
        //apply for billing address as well
        if(globalShipAddressType == 0){
            $("#billAddress1").val(sugadd);
            $("#billState").val(sugstate);
            $("#billCity").val(sugcity);
            $("#billPostalCode").val(sugzipcode);
            updateBillingAddress();
        }
        
        $("#shipAddress1").val(sugadd);
        $("#shipCity").val(sugcity);
        $("#shipState").val(sugstate);
        $("#shipPostalCode").val(sugzipcode);
        shipPaneClick();
     }
     
     function findVal(arr, key){
         ret = '';
         for (i=0; i < arr.length; i++){
             var item = arr[i];             
             if( item.indexOf(key) >= 0){
                 ret = item.substring(item.indexOf('=') + 1);
                 break;
             }
         }
         
         return ret;
     }
     
    $(document).ready(function(){                        
        $("#loginPaneNewUser").click(function(){
            globalShipAddressType = 0;
            $("#loginPane_edit").hide();
            $("#billAddressPane_idle").hide();
            $("#billAddressPane_edit").show();
            
        });
        
        $("#loginPaneLogin").click(function(){
       //  $("#loginPaneLogin").attr("src", "assets/images/processing.gif");
            if(authenticatedUser()){  
           $("#loginPaneLogin").attr("src", "assets/images/processing.gif");     
                var request = $.ajax({
                    type: "POST",
                    url: "checkoutController.php",
                    data: { action: "login", loginPaneEmailAddress: $("#loginPaneEmailAddress").val(), loginPanePassword: $("#loginPanePassword").val() }
                });

                request.done(function(msg) {          
                    var array = msg.split("&");
                    var kv = {};                    
                    for (i=0; i < array.length; i++){
                        var item = array[i].split("=");                                                
                        if(item.length > 0){
                            kv[item[0]] = item[1];
                        }else{
                            kv[item[0]] = "";
                        }                         
                    }                                     
                    if(kv.ack == "ok"){                        
                        $("#billFirstName").val(kv.fname);
                        $("#billLastName").val(kv.lname);
                        $("#billAddress1").val(kv.address1);
                        $("#billAddress2").val(kv.address2);
                        $("#billCity").val(kv.city);
                        $("#billPostalCode").val(kv.postalcode);
                        $("#billHomePhone").val(kv.phone);                        
                        $("#billState").val(kv.state);
                        $("#billEmailAddress").val(kv.email);
                        $("#billConfirmEmail").val(kv.email);

                        $("#shipFirstName").val(kv.shipfname);
                        $("#shipLastName").val(kv.shiplname);
                        $("#shipAddress1").val(kv.shipaddress1);
                        $("#shipAddress2").val(kv.shipaddress2);
                        $("#shipCity").val(kv.shipcity);
                        $("#shipPostalCode").val(kv.shippostalcode);
                        $("#shipHomePhone").val(kv.shipphone);                        
                        $("#shipState").val(kv.shipstate);

                        billPaneClick();
                        //shipPaneClick();
                        $("#shipPaneShipToBillAddress").attr("checked", "checked");
                        globalShipAddressType = 0;
                        $("#shipPaneNewShipAddress").hide();   
                        
                        $("#loginPane_edit").hide();                                                                       
                    }else{
                        $("#loginPaneLoginError").text(kv.msg);                        
                    }
                    
                    $("#loginPaneLogin").attr("src", "assets/images/ckout_login.gif");
                });                                                                
            }                        
        });                
        
        $("#billPaneContinue").click(function(){
            if(validateBillAddress()){
                 billPaneClick();
                 $("#shipPaneShipToBillAddress").attr("checked", "checked");
                 globalShipAddressType = 0;
                 $("#shipPaneNewShipAddress").hide();                 
            } 
            
        });                        
        
        $("#shipPaneContinue").click(function(){
            if($('#shipPaneShipToBillAddress').is(':checked') || validateShipAddress()){
                $("#shipPaneContinue").attr("src", "assets/images/processing.gif");
                //ship to billing address
                if(globalShipAddressType == 0){
                    $("#shipFirstName").val($("#billFirstName").val());
                    $("#shipLastName").val($("#billLastName").val());                                            
                    $("#shipAddress1").val($("#billAddress1").val());
                    $("#shipAddress2").val($("#billAddress2").val());
                    $("#shipState").val($("#billState").val());
                    $("#shipCity").val($("#billCity").val());
                    $("#shipPostalCode").val($("#billPostalCode").val());
                    $("#shipHomePhone").val($("#billHomePhone").val());
                }
                
                var request = $.ajax({
                    type: "POST",
                    url: "smartyapi.php",
                    data: { action: "smarty", shipAddress1: $("#shipAddress1").val(), shipCity: $("#shipCity").val(),
                                shipState: $("#shipState").val(), shipPostalcode: $("#shipPostalCode").val()}
                });

                request.done(function(msg_usps) {          
                    var arrayAddress = msg_usps.split("&");                                       
                    $("#shipPaneContinue").attr("src", "assets/images/ckout_continue_active.gif");
                    
                    //display popup
                    var wheight = $(document).height();
                    //var wwidth = $(document).width(); 

                    var addValidatePanel = "<table id=\"addressVerification_panel\" style=\"width: 750px; height: 500px; top: 90px; left: 300px;\">";
                    addValidatePanel += "<tbody>";
                    addValidatePanel += "<tr><td class=\"top_left\">&nbsp;</td> <td class=\"top_center\">&nbsp;</td> <td class=\"top_right\">&nbsp;</td></tr>";
                    addValidatePanel += "<tr>";
                    addValidatePanel += "<td class=\"middle_left\">&nbsp;</td>"; 
                    addValidatePanel += "<td class=\"middle_center\">";	    
                    addValidatePanel += "<div id=\"avOverlay\">";
                    addValidatePanel += "<div onclick=\"javascript:closeAddressVerificationPanel();\" id=\"avCloseWindow\" class=\"avVirtualLink\">Close window [x]</div>";
                    addValidatePanel += "<div id=\"avTitle\">Address Verification</div>";
                    addValidatePanel += "<hr id=\"avTitleBreak\">";
                    addValidatePanel += "<p></p>";
                    addValidatePanel += "<div>The shipping address you entered does not appear to be a valid postal address. Please select one of these Suggested Options or continue with the Original Address:</div>";
                    addValidatePanel += "<p>";
                    addValidatePanel += "<table cellspacing=\"0\" cellpadding=\"0\">";
                    addValidatePanel += "<tbody>";
                    addValidatePanel += "<tr valign=\"top\">";
                    addValidatePanel += "<td width=\"400\">";
                    addValidatePanel += "<div class=\"avBoxTitle\">Suggested Options</div>";
                    addValidatePanel += "<div id=\"avBoxLeft\">";        
                   
                   if(findVal(arrayAddress,'ack') == "ok"){   
                        var sugAddress  = findVal(arrayAddress, 'shipaddress1');
                        var sugcity     = findVal(arrayAddress, 'shipcity');
                        var sugzipcode  = findVal(arrayAddress, 'shippostalcode');
                        var sugstate    = findVal(arrayAddress, 'shipstate');
                        
                        addValidatePanel += "<div style=\"float: left\">";
                        addValidatePanel += "<div align=\"center\">";
                        addValidatePanel += "<div id=\"addressContainer\">";
                        addValidatePanel += "<div class=\"txtaddresspanel\">"+sugAddress+ "</div>";
                        addValidatePanel += "<div class=\"txtaddresspanel\">"+sugcity+", " + sugstate + "</div>";
                        addValidatePanel += "<div class=\"txtaddresspanel\">" + sugzipcode +"</div>";
                        addValidatePanel += "</div>";
                        addValidatePanel += "</div>";
                        addValidatePanel += "<div><img height=\"24\" width=\"139\" src=\"assets/images/btn_use_this_address.jpg\"  class=\"avVirtualLink\" onclick=\"javascript:useAddressVerificationPanel('"+sugAddress+"','"+sugcity+"','"+sugstate+"','"+sugzipcode+"');\" alt=\"Use this address\"></div>";
                        addValidatePanel += "</div>";
                        addValidatePanel += "<div style=\"clear: both;\"></div>";
                        addValidatePanel += "<p></p>";                        
                        
                    }else{
                        addValidatePanel += "<div class=\"avMessage\">We were unable to find any Suggested Options. Please Use or Edit the Original Address.</div>"; 
                    }
                    addValidatePanel += "</div>";
                    addValidatePanel += "</td>";
                    addValidatePanel += "<td width=\"20\">&nbsp;</td>";
                    addValidatePanel += "<td width=\"300\">";
                    addValidatePanel += "<div class=\"avBoxTitle\">Original Address</div>";
                    addValidatePanel += "<div id=\"avBoxRight\">";
                    addValidatePanel += "<div align=\"center\">";
                    addValidatePanel += "<div id=\"addressContainer\">";
                    addValidatePanel += "<div class=\"txtaddresspanel\">"+$("#shipAddress1").val()+ "</div>";
                    addValidatePanel += "<div class=\"txtaddresspanel\">"+$("#shipCity").val()+ ", " + $("#shipState").val() + "</div>";
                    addValidatePanel += "<div class=\"txtaddresspanel\">" + $("#shipPostalCode").val() +"</div>";                                
                    addValidatePanel += "</div>";
                    addValidatePanel += "</div>";
                    addValidatePanel += "<div align=\"center\">";
                    addValidatePanel += "<img width=\"139\" height=\"24\" src=\"assets/images/btn_use_original.jpg\" onclick=\"javascript:useOrigialAddress();\" class=\"avVirtualLink\" alt=\"Use original\">";
                    addValidatePanel += "<img width=\"139\" height=\"24\" src=\"assets/images/btn_edit_original.jpg\" onclick=\"javascript:editAddressVerificationPanel();\" class=\"avVirtualLink\" alt=\"Edit original\">";
                    addValidatePanel += "</div>";
                    addValidatePanel += "<p></p>";
                    addValidatePanel += "</div>";
                    addValidatePanel += "<p></p>";
                    addValidatePanel += "</td>";
                    addValidatePanel += "</tr>";
                    addValidatePanel += "</tbody>";
                    addValidatePanel += "</table>";
                    addValidatePanel += "<br>";
                    addValidatePanel += "</p>";
                    addValidatePanel += "<div style=\"float: left;\"><img width=\"52\" height=\"60\" src=\"assets/images/ups_logo_s.gif\" alt=\"Use original\"></div>";
                    addValidatePanel += "<div class=\"avMessage\">UPS, the UPS brand mark, and the Color Brown are trademarks of United Parcel Service of America, Inc. All Rights Reserved.</div>";
                    addValidatePanel += "</div>";
                    addValidatePanel += "</td> <td class=\"middle_right\">&nbsp;</td>";
                    addValidatePanel += "</tr>";
                    addValidatePanel += "<tr> <td class=\"bottom_left\">&nbsp;</td> <td class=\"bottom_center\">&nbsp;</td> <td class=\"bottom_right\">&nbsp;</td></tr>";
                    addValidatePanel += "</tbody>"
                    addValidatePanel += "</table>";

                    $('<div id="addressVerification_panel_overlayBG" style="height:'+wheight+'px"></div>').prependTo('body');
                    $(addValidatePanel).prependTo('body');                    
                });                                
            }
        });
        
        $("#payMethodPaneContinue").click(function(){
            if(validateCC()){
                $("#paymentMethodPane_edit").hide();
                $("#paymentMethodPane_idle").hide();
                $("#paymentMethodPane_view").show();
                
                updatePaymentMethod();
                
                $("#orderReviewPane_idle").hide();
                $("#orderReviewPane_edit").show();
                $("#orderSubmit_error").text("");
                
            }
        });

        $("#billPaneEdit").click(function(){
            $("#billAddressPane_idle").hide();
            $("#billAddressPane_edit").show();
            $("#billAddressPane_view").hide();
            
            $("#shipAddressPane_edit").hide();    
            $("#shipAddressPane_idle").show();
            $("#shipAddressPane_view").hide();
            
            $("#paymentMethodPane_edit").hide();
            $("#paymentMethodPane_idle").show();
            $("#paymentMethodPane_view").hide();
            
            $("#orderReviewPane_idle").show();
            $("#orderReviewPane_edit").hide();
        });
        
    $("#shipPaneEdit").click(function(){
        
        $("#billAddressPane_idle").hide();
        $("#billAddressPane_edit").hide();
        $("#billAddressPane_view").show();
        
        $("#shipAddressPane_edit").show();    
        $("#shipAddressPane_idle").hide();
        $("#shipAddressPane_view").hide();
        
        $("#paymentMethodPane_edit").hide();
        $("#paymentMethodPane_idle").show();
        $("#paymentMethodPane_view").hide();
        
        $("#orderReviewPane_idle").show();
        $("#orderReviewPane_edit").hide();
        
        if(globalShipAddressType){
          $("#shipPaneShipToNewAddress").attr("checked", "checked");
          $("#shipPaneNewShipAddress").show();
        } 
    });
    
    $("#payMethodPaneEdit").click(function(){
            $("#paymentMethodPane_edit").show();
            $("#paymentMethodPane_idle").hide();
            $("#paymentMethodPane_view").hide();
            
            $("#billAddressPane_idle").hide();
            $("#billAddressPane_edit").hide();
            $("#billAddressPane_view").show();
            
            $("#orderReviewPane_idle").show();
            $("#orderReviewPane_edit").hide();
    });
    
    $("#shipPaneShipToNewAddress").click(function(){
        $("#shipPaneNewShipAddress").show();   
        globalShipAddressType = 1;
        //$("#shipPaneShipToNewAddress").attr("checked", "checked");         
    });
    
    $("#shipPaneShipToBillAddress").click(function(){
        $("#shipPaneNewShipAddress").hide();
        globalShipAddressType = 0;        
        //$("#shipPaneShipToBillAddress").attr("checked", "checked");
    });
        
    $("#payCC").attr("checked", "checked");
    $("#cardVISA").attr("checked", "checked");
    //$("#shipPaneShipToBillAddress").attr("checked", "checked");
          
    //set default
    $("#billCountry").val("US");
    $("#shipCountry").val("US");
    
    $("#orderSubmit").click(function(){  
        
        $("#orderSubmit").attr("src", "assets/images/processing.gif");
        
        var ccCardNumber = $("#payMethodPaneCardNumber").val();
        var ccExpireMonth = $("#payMethodPaneExpireMonth").val();
        var ccExpireYear = $("#payMethodPaneExpireYear").val();
        var ccCVV = $("#payMethodPaneCVV").val();
        var cardtype = $('input:radio[name=payMethodPaneCardType]:checked').val();        
        var pluginString = '';
        for (var i = 0; i < navigator.plugins.length; i++) {
            pluginString += navigator.plugins[i].name + ',';
        }
        pluginString = pluginString.substring(0, pluginString.lastIndexOf(','));
        var request = $.ajax({
            type: "POST",
            url: "checkoutController.php",
            data: {action: "save", shipToBill: $('#shipPaneShipToBillAddress').is(':checked'), billfname: $("#billFirstName").val(),
                    billlname: $("#billLastName").val(), billAddress1: $("#billAddress1").val(), shipCountry: $("#shipCountry").val(),
                    billAddress2: $("#billAddress2").val(), billCity: $("#billCity").val(), billHomePhone: $("#billHomePhone").val(),
                    billState: $("#billState").val(), billPostalcode: $("#billPostalCode").val(), billEmailAddress: $("#billEmailAddress").val(),
                    billCountry: $("#billCountry").val(), shipfname: $("#shipFirstName").val(),	 shiplname: $("#shipLastName").val(),	
                    shipAddress1: $("#shipAddress1").val(), shipAddress2: $("#shipAddress2").val(), shipCity: $("#shipCity").val(),
                    shipHomePhone: $("#shipHomePhone").val(), shipState: $("#shipState").val(), shipPostalcode: $("#shipPostalCode").val(),
                    CardType: cardtype, CardNumber: ccCardNumber, ExpireMonth: ccExpireMonth, ExpireYear: ccExpireYear, CVV: ccCVV,
                    screenResolution: screen.width + 'x' + screen.height, javaEnabled: navigator.javaEnabled(), pluginList: pluginString}
        });

        request.done(function(msg) {          
            var array = msg.split("&");
//            var kv = {};                    
//            for (i=0; i < array.length; i++){
//                var item = array[i].split("=");                                                
//                if(item.length > 0){
//                    kv[item[0]] = item[1];
//                }else{
//                    kv[item[0]] = "";
//                }                         
//            }                        
            if(findVal(array,'ack') == "ok"){       
                window.location = "paymentnotice.php";
            }else{
                $("#orderSubmit_error").text(kv.msg);
                $("#orderSubmit").attr("src", "assets/images/ckout_submit_order.gif");
            }                                        
        });                        
    });
    });
                    
</script> 
  <div id="productGrid">        
            <div id="mainWrapper">            
                <form id="spcoForm" name="spcoForm" onsubmit="return false;" method="post">
                <input type="hidden" name="command" />
            <div id="checkout_page_base">
            <div id="checkout_container">		
                <div id="checkout_top"></div>
                <div id="checkout_middle">
			 
                <div id="loginPane_edit" style="display: block;"> 
                <table cellspacing="0" cellpadding="3" border="0" width="100%">
                <tbody>
                    <tr valign="top">
                        <td width="50%">	
                        <table width="100%">
                        <tbody>
                            <tr>
                            <td colspan="2" class="form_title">Loyalty  &amp; Registered Users</td>
                            </tr>
                            <tr>
                                <td colspan="2" class="info_text">Please log in below.</td>
                            </tr>
                            <tr>
                                <td colspan="2" class="info_text"><span id="loginPaneLoginError" class="error_message"><?=$msg?></span></td>
                            </tr>
                            <tr>
                            <td class="left_column"><label for="loginPaneEmailAddress">Your e-mail</label></td>
                                <td><input type="text" value="" maxlength="50" size="20" name="loginPaneEmailAddress" id="loginPaneEmailAddress" /></td>
                            </tr>
                            <tr>
                                <td class="left_column"><label for="loginPanePassword">Password</label></td>
                                <td><input type="password" value="" size="20" name="loginPanePassword" id="loginPanePassword"></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td class="hint_text"><a target="_blank" href="resetpwd.php">Forgot your password?</a></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td><input width="80" type="image" height="20" id="loginPaneLogin" src="assets/images/ckout_login.gif" alt="Sign In" /></td>
                            </tr>
                            <tr>
                                <td height="2" colspan="2"></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td width="8"></td>
                <td id="loginPaneFormSeparator"></td>
                <td width="8"></td>
                <td>
                    <table width="100%">
                        <tbody>
                            <tr>
                                <td colspan="2" class="form_title">New &amp; Guest Users</td>
                            </tr>
                            <tr>
                                <td colspan="2" class="info_text">You will have the choice to create an account after checkout.</td>
                            </tr>                        
                            <tr>
                                <td align="center" colspan="2"><input width="80" type="image" height="20" id="loginPaneNewUser" src="assets/images/ckout_continue.gif" alt="Continue"></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                </tr>
                </tbody></table>
                </div>
                <div id="billAddressPane_idle" style="display: block;">

                        <div id="billAddressAccordion" class="accordion_wrapper">
                                <div class="accordion_left"><img src="assets/images/ckout_step_1_inactive.gif" class="checkout_step_inactive"></div>
                                <div class="accordion_right">Billing Address</div> 
                        </div> 
                </div>
                <div id="billAddressPane_view" style="display: none;">

                        <div class="view_pane">
                        <table  width="100%">
                        <tbody><tr valign="top">
                        <td class="step"><img alt="" src="assets/images/ckout_step_1_complete.gif" class="checkout_step_complete"></td>
                        <td class="title"><span class="form_title">Billing Address</span></td>
                        <td class="data"><div class="info_text" id="billAddrViewPaneData"></div></td>
                        <td class="edit"><input width="50" vspace="5" type="image" border="0" height="20" src="assets/images/ckout_edit.gif" id="billPaneEdit"></td>
                        </tr>
                        </tbody></table>
                        </div>
                </div>     
<div id="billAddressPane_edit" style="display: none;">
	
	<div id="editPaneHeader">
        <table cellspacing="0" cellpadding="0">
        <tbody><tr>
        <td valign="top" class="edit_pane_header_left"><img hspace="2" src="assets/images/ckout_step_1_active.gif" class="checkout_step_active"></td>
        <td class="edit_pane_header_right">
            <table cellspacing="0" cellpadding="0" style="padding-top: 9px;">
            <tbody><tr valign="top">
            <td nowrap="nowrap" class="form_title">Billing Address</td>
            <td class="info_text">&nbsp;-&nbsp;</td>
            <td class="info_text">Please enter your billing information as shown on your</br> credit card statement or your order may be delayed.</td>
            </tr>
            <tr>
            </tr>
            </tbody></table>
        </td>
        </tr>
        </tbody></table>
    </div>
	<div class="paneEditForm">			
            <div id="billPaneNewBillAddress">
            <table>
		<tbody>
                    <tr>
                    <td class="hint_text billAddressType">* Required Fields</td>
                    </tr>
                    </tbody>
            </table>
            <table>
		<tbody><tr id="billAddressDup">
		<td class="left_column" width="120"></td>
		<td><div class="error_message" id="billAddressBook_Dup"></div></td>
		</tr>
		<tr>
		<td class="left_column"><label for="billCountry">*Country</label></td>
		<td>
			<select name="billCountry" id="billCountry">
<?php
    $result = mysql_query("SELECT countrycode, countryname FROM x2_country");
    while ($row = mysql_fetch_assoc($result)) {
?>
                        <option value="<?=$row['countrycode']?>"><?=$row['countryname']?></option>                                   
<?php                            
    }
?>
			</select>			
		</td>
		</tr>
		<input type="hidden" value="-1" id="billMyAddressBookIndex" name="billMyAddressBookIndex">
		<tr>
		<td class="left_column"><label for="billFirstName">*First Name</label></td>
		<td><input type="text" value="" maxlength="14" size="24" name="billFirstName" id="billFirstName"> <span class="error_message" id="billFirstName_error"></span></td>
		</tr>
		<tr>
		<td class="left_column"><label for="billLastName">*Last Name</label></td>
		<td><input type="text" value="" maxlength="14" size="24" name="billLastName" id="billLastName"> <span class="error_message" id="billLastName_error"></span></td>
		</tr>
		<tr>
		<td class="left_column"><label for="billAddress1">*Street Address 1</label></td>
		<td><input type="text" value="" maxlength="30" size="24" name="billAddress1" id="billAddress1"> <span class="error_message" id="billAddress1_error"></span></td>
		</tr>
		<tr>
		<td class="left_column"><label for="billAddress2">Street Address 2</label></td>
		<td><input type="text" value="" maxlength="30" size="24" name="billAddress2" id="billAddress2"><span class="error_message" id="billAddress2_error"></span></td>
		</tr>
		<tr>
		<td class="left_column"><label for="billCity">*City</label></td>
		<td><input type="text" value="" maxlength="15" size="24" name="billCity" id="billCity"> <span class="error_message" id="billCity_error"></span></td>
		</tr>
        <tr id="billStateContainer">
		<td class="left_column"><label for="billState">*State</label></td>
		<td>
            <table class="multiColumnField">
            <tbody>
                <tr>
                <td class="stateField">
                    <select name="billState" id="billState">
                        <option value="">Pick State</option>                        
<?php
    $result = mysql_query("SELECT statecode, statename FROM x2_state");
    while ($row = mysql_fetch_assoc($result)) {
?>
                        <option value="<?=$row['statecode']?>"><?=$row['statename']?></option>                                   
<?php                            
    }
?>                        
                    </select>
                </td>
                <td class="errMsg"><span class="error_message" id="billState_error"></span></td>
            </tr>
            </tbody></table>
		</td>
		</tr>        
		<tr>
		<td class="left_column"><label for="billPostalCode">*Zip Code</label></td>
		<td><input type="text" value="" maxlength="9" size="16" name="billPostalCode" id="billPostalCode"> <span class="error_message" id="billPostalCode_error"></span></td>
		</tr>
		<tr>
		<td class="left_column"><label for="billHomePhone">*Phone</label></td>
		<td><input type="text" value="" maxlength="16" size="16" id="billHomePhone" name="billHomePhone" class=""> <span class="error_message" id="billHomePhone_error"></span></td>
		</tr>
		
			<input type="hidden" value="" name="billMobilePhone">
		
		<tr id="billUpdateAccountOption" style="display: none;">
		<td>&nbsp;</td>
		<td>
		
				<input type="checkbox" value="true" name="billUpdateAccount" id="billUpdateAccount"><span id="billUpdateLabel" class="info_text"><label for="billUpdateAccount">Save these changes to my address book.</label></span></td>
			
        
		</tr>
		<tr>
		<td class="left_column"><label for="billEmailAddress">*Email Address</label></td>
		<td><input type="text" value="" maxlength="50" size="24" name="billEmailAddress" id="billEmailAddress"> <span class="error_message" id="billEmailAddress_error"></span></td>
		</tr>
		<tr>
		<td class="left_column"><label for="billConfirmEmail">*Confirm Email</label></td>
		<td><input type="text" value="" maxlength="50" size="24" name="billConfirmEmail" id="billConfirmEmail"> <span class="error_message" id="billConfirmEmail_error"></span></td>
		</tr>
		<tr>
		<td>&nbsp;</td>
		<td>
			<span class="hint_text">Your email address is required to send order and shipping confirmations, as well as other questions or additional information about your order.</span>		</td>
		</tr>
		<tr>
		<td>&nbsp;</td>
		<td><div style="display:none;" id="nonUSVIPDisclaimer">We will not update your VIP Club information. Our ABO VIP Club is open to residents of the U.S. only and we are unable to issue VIP Club credit for international orders</div></td>
		</tr>

		</tbody></table>
		</div>
		<table width="100%">
		<tbody><tr>
		<td align="right"><div class="error_message" id="billAddressAccount_error"></div></td>
                <td width="420"></td>
		<td align="right"><input width="80" type="image" height="20" id="billPaneContinue" name="billPaneContinue" value="" src="assets/images/ckout_continue_active.gif" alt="Continue" editimgsrc="assets/images/ckout_continue_active.gif" editimgwidth="80" editimgheight="20"></td>
		</tr>
		</tbody></table>
	</div>
</div>                                      
                <div id="shipAddressPane_idle" style="display: block;">

                        <div id="shipAddressAccordion" class="accordion_wrapper">
                                <div class="accordion_left"><img src="assets/images/ckout_step_2_inactive.gif" class="checkout_step_inactive"></div>
                                <div class="accordion_right">Shipping Address</div>
                        </div>
                </div>   
                <div id="shipAddressPane_view" style="display: none;">

                        <div class="view_pane">
                        <table width="100%">
                        <tbody><tr valign="top">
                        <td class="step"><img alt="" src="assets/images/ckout_step_2_complete.gif" class="checkout_step_complete"></td>
                        <td class="title"><span class="form_title">Shipping Address</span></td>
                        <td class="data"><div class="info_text" id="shipAddrViewPaneData">Kala Keth</br>222 Downing Str</br>AK 1111</br>01019191999</br>aaa@ssss.ss</div></td>
                        <td id="shipEditTD" class="edit"><input width="50" vspace="5" type="image" border="0" height="20" src="assets/images/ckout_edit.gif" id="shipPaneEdit"></td>
                        </tr>
                        </tbody></table>
                        </div>
                </div> 
<div id="shipAddressPane_edit" style="display: none;">

	<div id="editPaneHeader">
        <table cellspacing="0" cellpadding="0">
        <tbody><tr>
        <td class="edit_pane_header_left"><img hspace="2" src="assets/images/ckout_step_2_active.gif" class="checkout_step_active"></td>
        <td class="edit_pane_header_right"><span class="form_title">Shipping Address</span></td>
        </tr>
        </tbody></table>
    </div>
	<div class="paneEditForm">
		<div class="error_message" id="shippingAddressRestrictionMessage"></div>
		
        <table>
        <tbody><tr valign="top">
        <td width="275" class="info_text shipAddressType">           
            <div id="shipPaneShipToBillContainer">
                <input type="radio" value="bill" name="shipAddressType" id="shipPaneShipToBillAddress"> <label for="shipPaneShipToBillAddress">Ship to the Billing Address on this order</label><br>
            </div>
               <input type="radio" value="new" name="shipAddressType" id="shipPaneShipToNewAddress"> <label for="shipPaneShipToNewAddress">Ship to a new address</label><br>			
        </td>
        
        <td>&nbsp;</td>
        <td>

        <span id="shipPaneShippingAddress" class="info_text">&nbsp;</span>
        <span id="shipPaneBillingAddress" class="info_text">&nbsp;</span>
        </td>
        </tr>
        </tbody></table>
		
		
                <div id="shipPaneNewShipAddress" style="display: none;">
			
			<table>
			<tbody><tr id="shipAddressDup">
			<td class="left_column" width="120" height="10"></td>
			<td><div class="error_message" id="shipAddressBook_Dup"></div></td>
			</tr>
			<tr>
			</tr><tr>
			<td class="left_column"><label for="shipCountry">*Country</label></td>
			<td>
				<select name="shipCountry" id="shipCountry">

<?php
    $result = mysql_query("SELECT countrycode, countryname FROM x2_country");
    while ($row = mysql_fetch_assoc($result)) {
?>
                        <option value="<?=$row['countrycode']?>"><?=$row['countryname']?></option>                                   
<?php }?>	                                                    
				</select>				
				
                            <span class="error_message" id="shipCountry_error"></span>
			</td>
			</tr>
			<input type="hidden" value="-1" id="shipMyAddressBookIndex" name="shipMyAddressBookIndex">
			<input type="hidden" value="false" id="shipToStore" name="shipToStore">
			<tr>
			<td class="left_column"><label for="shipFirstName">*First Name</label></td>
			<td><input type="text" value="" maxlength="14" size="24" name="shipFirstName" id="shipFirstName"> <span class="error_message" id="shipFirstName_error"></span></td>
			</tr>
			<tr>
			<td class="left_column"><label for="shipLastName">*Last Name</label></td>
			<td><input type="text" value="" maxlength="14" size="24" name="shipLastName" id="shipLastName"> <span class="error_message" id="shipLastName_error"></span></td>
			</tr>
			<tr>
			<td class="left_column"><label for="shipAddress1">*Street Address 1</label></td>
			<td>
                <table class="multiColumnField">
                <tbody><tr>
                	<td class="shipAddressField"><input type="text" value="" maxlength="30" size="24" name="shipAddress1" id="shipAddress1"></td>
                    <td class="errMsg">
                        <span class="error_message" id="shipAddress1_error"></span>                        
                    </td>
				</tr>
                </tbody></table>
            </td>
			</tr>
			<tr>
			<td class="left_column"><label for="shipAddress2">Street Address 2</label></td>
			<td><input type="text" value="" maxlength="30" size="24" name="shipAddress2" id="shipAddress2"><span class="error_message" id="shipAddress2_error"></span></td>
			</tr>
			<tr>
			<td class="left_column"><label for="shipCity">*City</label></td>
			<td><input type="text" value="" maxlength="15" size="24" name="shipCity" id="shipCity"> <span class="error_message" id="shipCity_error"></span></td>
			</tr>
            <tr id="shipStateContainer">
            <td class="left_column"><label for="shipState">*State</label></td>
            <td>
                <table class="multiColumnField">
                <tbody><tr>
                	<td class="stateField">
                        <select name="shipState" id="shipState">
                            <option value="">Pick State</option>
<?php
    $result = mysql_query("SELECT statecode, statename FROM x2_state");
    while ($row = mysql_fetch_assoc($result)) {
?>
                        <option value="<?=$row['statecode']?>"><?=$row['statename']?></option>                                   
<?php                            
    }
?>                                                           
                        </select>
                    </td>
                    <td class="errMsg"><span class="error_message" id="shipState_error"></span></td>
				</tr>
                </tbody></table>
            </td>
            </tr>            
                <tr>
                    <td class="left_column"><label for="shipPostalCode">*Zip Code</label></td>
                    <td><input type="text" value="" maxlength="9" size="16" name="shipPostalCode" id="shipPostalCode"> <span class="error_message" id="shipPostalCode_error"></span></td>
                </tr>
                <tr>
                    <td class="left_column"><label for="shipHomePhone">*Phone</label></td>
                    <td><input type="text" maxlength="16" size="16" id="shipHomePhone" name="shipHomePhone"> <span class="error_message" id="shipHomePhone_error"></span></td>
                </tr>				
		</tbody></table>
		</div>
		<div id="morespace"></div>
		<table width="100%">
		<tbody>
                    <tr>
                    <td><div class="error_message" id="shipAddressAccount_error"></div></td>
                    <td width="420"></td>
                    <td align="right"><input width="80" type="image" align="right" height="20" name="shipPaneContinue" id="shipPaneContinue" value="" src="assets/images/ckout_continue_active.gif" alt="Continue"></td>
                    </tr>
		</tbody></table>
	</div>
</div>                    
                    <div id="paymentMethodPane_idle" style="display: block;">

                        <div id="payMethodAccordion" class="accordion_wrapper">
                                <div class="accordion_left"><img src="assets/images/ckout_step_3_inactive.gif" class="checkout_step_inactive"></div>
                                <div class="accordion_right">Payment Method</div> 
                        </div> 
                </div>
                <div id="paymentMethodPane_view" style="display: none;">

                        <div class="view_pane">
                        <table  width="100%">
                        <tbody><tr valign="top">
                        <td class="step"><img alt="" src="assets/images/ckout_step_3_complete.gif" class="checkout_step_complete"></td>
                        <td class="title"><span class="form_title">Payment Method</span></td>
                        <td class="data"><div class="info_text" id="payMethViewPaneData"></div></td>
                        <td class="edit"><input width="50" vspace="5" type="image" border="0" height="20" src="assets/images/ckout_edit.gif" id="payMethodPaneEdit"></td>
                        </tr>
                        </tbody></table>
                        </div>
                </div>                  
<div id="paymentMethodPane_edit" style="display: none;">
	
	
	<div id="editPaneHeader">
        <table cellspacing="0" cellpadding="0">
        <tbody><tr>
        <td class="edit_pane_header_left"><img hspace="2" src="assets/images/ckout_step_3_active.gif" class="checkout_step_active"></td>
        <td class="edit_pane_header_right"><span class="form_title">Payment Method</span></td>
        </tr>
        </tbody></table>
    </div>
	
	<div style="color: red; font-size: 11px; font-weight: bold; padding-left: 10px; display: none;" id="paymentMethodEntryMessage">Unfortunately, we are unable to accept PayPal&trade;  Please select an alternate payment method to complete your order.</div>
	<div style="margin-top: 4px; display: none;" id="paypal_init_success">
		<table>
		<tbody><tr>
			<td><img width="60" align="absmiddle" hspace="4" height="38" src="//www.paypal.com/en_US/i/logo/PayPal_mark_60x38.gif"></td>
			<td class="info_text">
				You've selected PayPal&trade; as your payment method.<br>
				<span style="font-weight: bold">PayPal&trade; Account: <span id="paypal_init_success_email"></span></span><br>
				Once you submit your order, your PayPal&trade; account will be charged for the whole Order Total.
				<div style="margin-top: 3px;" id="paypal_other_methods_link" class="virtualLink">Change Payment Method</div>
			</td>
		</tr>
		</tbody></table>
	</div>
	<div style="margin-top: 4px; display: none;" id="bml_init_success">
		<table>
		<tbody><tr>
			<td><img width="59" border="0" hspace="10" height="38" src="assets/images/2010BML.gif"></td>
			<td class="info_text">
				You have selected Bill Me Later&reg; as your payment method.<br>
				Once your submit your order, you will receive a confirmation email from Bill Me Later&reg;
				<div style="margin-top: 3px;" id="bml_other_methods_link" class="virtualLink">Change Payment Method</div>
			</td>
		</tr>
		</tbody></table>
	</div>
	<p id="paymentMethodForm">
	<table id="payMethodPanePaymentForm">
	<tbody><tr>
	<td class="info_text"><div class="error_message" id="paymentMethodPane_error"></div>
    	<input type="hidden" value="" name="payMethodPaneCardType">
		<div id="payment_methods">
	
		<table width="500" id="payMethodCreditCardContainer">
		
		<tbody><tr id="payMethodStoredCCContainer" style="display: none;">
        <td colspan="8"><input type="radio" value="StoredCC" name="payMethodPanePayType" id="payStoredCC"><label for="payStoredCC">&nbsp;<span class="form_title">Use Saved Card</span></label>&nbsp;&nbsp;<span class="error_message" id="payMethodPaneStoredCCS_error"></span></td>
		</tr>
		<tr id="payMethodStoredCCFormContainer" style="display: none;">
		<td width="16"></td>
		<td id="SavedcreditCardForm" colspan="7" style="display: none;">
			<table>
			<tbody><tr valign="top">
			<td width="200" class="info_text">Select Card</td>
			<td width="250"><div id="payMethodPaneStoredCC">&nbsp;</div>
				<div style="color:red; font-size:11px; font-weight:bold;" id="payMethodPaneCardWarning"></div>
			</td>
			</tr>
			
			<tr valign="top" style="display:none;" id="payMethodPaneConfirmCardNumberContain">
			<td width="200" class="info_text">Confirm Credit Card Number</td>
			<td><input type="text" autocomplete="off" maxlength="16" size="16" value="" name="payMethodPaneConfirmCardNumber" id="payMethodPaneConfirmCardNumber">&nbsp;<span class="hint_text">(no dashes or spaces)</span>
				<div class="error_message" id="payMethodPaneConfirmCardNumber_error"></div>
			</td>
			</tr>
			<tr valign="top" id="payMethodPaneReEnterExpDateContain">
			<td width="200" class="info_text">Re-enter Expiration Date</td>
			<td>
                
				<select name="payMethodPaneStoredCCExpireMonth" id="payMethodPaneStoredCCExpireMonth">
                    
                        <option value="1">January 
                        </option><option value="2">February 
                        </option><option value="3">March 
                        </option><option value="4">April 
                        </option><option value="5">May 
                        </option><option value="6">June 
                        </option><option value="7">July 
                        </option><option value="8">August 
                        </option><option value="9">September 
                        </option><option value="10">October 
                        </option><option value="11">November 
                        </option><option value="12">December 
				</option></select>
				<select name="payMethodPaneStoredCCExpireYear" id="payMethodPaneStoredCCExpireYear">
                    
                        <option value="12">2012 
                        </option><option value="13">2013 
                        </option><option value="14">2014 
                        </option><option value="15">2015 
                        </option><option value="16">2016 
                        </option><option value="17">2017 
                        </option><option value="18">2018 
                        </option><option value="19">2019 
                        </option><option value="20">2020 
                        </option><option value="21">2021 
                        </option><option value="22">2022 
                        </option><option value="23">2023 
                        </option><option value="24">2024 
                        </option><option value="25">2025 
				</option></select>
				<div class="error_message" id="payMethodPaneStoredCCExpireMonth_error"></div>
				<div class="error_message" id="payMethodPaneStoredCCExpireYear_error"></div>
			</td>
			</tr>
			
				<tr valign="top">
				<td width="200" class="info_text">Credit Card Verification Code</td>
				<td><input type="text" autocomplete="off" maxlength="4" size="3" id="payMethodPaneStoredCCCVV" name="payMethodPaneStoredCCCVV">&nbsp;<span id="payMethodPaneStoredCCCVVRequired">Required&nbsp;</span>
				</td>
				</tr>
                        <tr>
                        <td width="460" colspan="2"><div class="error_message" id="payMethodPaneStoredCCCVV_error"></div></td>
                        </tr>									
			</tbody></table>
		</td>
		</tr>
        
		<tr id="payMethodNewCCContainer">
		<td colspan="8"><input type="radio" value="CC" checked="checked" name="payMethodPanePayType" id="payCC"><label for="payCC">&nbsp;<span id="payCCTitle" class="form_title">Credit Card</span></label>&nbsp;&nbsp;<span class="error_message" id="payMethodPaneCardType_error"></span></td>
		</tr>
		<tr align="center" id="payMethodCCIcon">
		<td width="16"></td>
		<td width="77"><img width="57" height="36" src="assets/images/ckout_cc_visa.jpg"></td>
		<td width="77"><img width="57" height="36" src="assets/images/ckout_cc_mc.jpg"></td>
		<td width="60"><img width="40" height="36" src="assets/images/ckout_cc_amex.jpg"></td>
		<td width="76"><img width="56" height="36" src="assets/images/ckout_cc_disc.jpg"></td>
		<td width="67"><img width="47" height="36" src="assets/images/ckout_cc_jcb.jpg"></td>
		<td width="79"><img width="59" height="36" src="assets/images/ckout_cc_dc.jpg"></td>
		<td>&nbsp;</td>
		</tr>
		<tr align="center" id="payMethodCCSelection">
		<td>&nbsp;</td>
		<td><input type="radio" id="cardVISA" checked="checked" value="visa" name="payMethodPaneCardType"></td>
		<td><input type="radio" id="cardMC" value="mc" name="payMethodPaneCardType"></td>
		<td><input type="radio" id="cardAMEX" value="amex" name="payMethodPaneCardType"></td>
		<td><input type="radio" id="cardDISC" value="disc" name="payMethodPaneCardType"></td>
		<td><input type="radio" id="cardJCB" value="jcb" name="payMethodPaneCardType"></td>
		<td><input type="radio" id="cardDC" value="dc" name="payMethodPaneCardType"></td>
		<td>&nbsp;</td>
		</tr>
		<tr>
		<td width="16"></td>
		<td id="creditCardForm" colspan="7" style="display: table-cell;">
			<table>
			<tbody><tr>
                                <td class="info_text">Credit Card Number</td>
			<td><input type="text" autocomplete="off" maxlength="16" size="16" value="" name="payMethodPaneCardNumber" id="payMethodPaneCardNumber">&nbsp;<span class="hint_text">(no dashes or spaces)</span>
				<div class="error_message" id="payMethodPaneCardNumber_error"></div>
			</td>
			</tr>
			<tr valign="top">
			<td class="info_text">Expiration Date</td>
			<td>
                
				<select name="payMethodPaneExpireMonth" id="payMethodPaneExpireMonth" selectedindex="0">                    
                                    <option value="01">January</option> 
                                    <option value="02">February</option> 
                                    <option value="03">March</option> 
                                    <option value="04">April</option> 
                                    <option value="05">May</option> 
                                    <option value="06">June</option> 
                                    <option value="07">July</option> 
                                    <option value="08">August</option> 
                                    <option value="09">September</option> 
                                    <option value="10">October</option> 
                                    <option value="11">November</option> 
                                    <option value="12">December</option> 
				</select>
				<select name="payMethodPaneExpireYear" id="payMethodPaneExpireYear" selectedindex="0">
                    
                        <option value="12">2012 
                        </option><option value="13">2013 
                        </option><option value="14">2014 
                        </option><option value="15">2015 
                        </option><option value="16">2016 
                        </option><option value="17">2017 
                        </option><option value="18">2018 
                        </option><option value="19">2019 
                        </option><option value="20">2020 
                        </option><option value="21">2021 
                        </option><option value="22">2022 
                        </option><option value="23">2023 
                        </option><option value="24">2024 
                        </option><option value="25">2025 
				</option></select>
				<div class="error_message" id="payMethodPaneExpireMonth_error"></div>
				<div class="error_message" id="payMethodPaneExpireYear_error"></div>
			</td>
			</tr>
			
				<tr valign="top">
				<td class="info_text">Credit Card Verification Code</td>
				<td><input type="text" autocomplete="off" maxlength="4" size="3" id="payMethodPaneCVV" name="payMethodPaneCVV">&nbsp;<span id="payMethodPaneCVVRequired" style="display: inline;">Required&nbsp;</span>
				</td>
				</tr>
                <tr>
                <td colspan="2"><div class="error_message" id="payMethodPaneCVV_error"></div></td>
                </tr>
			
				<tr valign="top" id="payMethodPaneSaveCCcheckbox" style="display: none;">
				<td class="info_text"></td>
				<td class="info_text"><input type="checkbox" value="true" name="payMethodPaneStoreCC">&nbsp;Save this credit card to my account
				</td>
				</tr>						
			<tr>
			<td height="8" colspan="2"></td>
			</tr>
			</tbody></table>
		</td>
		</tr>
		</tbody></table>
		</div>
                <table id="paymentMethod_extra">
		<tbody>
                    <tr>
                    <td height="5" colspan="4"><div class="error_message" id="giftCardCode_general_error"></div></td>
                    </tr>
                    <tr>
                            <td colspan="4"><hr class="checkout_divider"></td>
                    </tr>
                    <tr>
                        <td class="leftPadding">&nbsp;</td>
                        <td colspan="3">
                            <div id="promoCodeTitle">
                                    <span class="form_title">Promotional Codes</span>&nbsp;
                            </div>
                            <span class="info_text">Promo Code or Source Code&nbsp;&nbsp;&nbsp;</span>
                            <input type="text" maxlength="50" size="50" value="" id="CPCOrSourceCode" name="CPCOrSourceCode">&nbsp;                            
                            <span class="hint_text">(optional)</span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4"><hr class="checkout_divider"></td>
                    </tr>
                    <tr>
                    <td class="leftPadding">&nbsp;</td>
                            <td id="promoEmails" colspan="3">
                            <div id="billPromoOptions" class="form_title">Promotional Emails:</div>
                        <table id="optinFormFields">
                        <tbody><tr id="billEmailOption">
                            <td><input type="checkbox" value="true" name="billSubscribeEmail" id="billSubscribeEmail"></td>
                            <td class="info_text">
                                    <label for="billSubscribeEmail">Yes, I want to receive email updates on future promotions.</label>
                            </td>
                        </tr>

                        </tbody></table>
                    </td>
                    </tr>
		</tbody></table>        
		
	</td>
	</tr>
	<tr>
	<td align="right">
    	<div class="error_message" id="payPP_error"></div>
		<span class="error_message" id="payMethodPane_error"></span>&nbsp;<input width="80" type="image" align="right" height="20" name="payMethodPaneContinue" id="payMethodPaneContinue" value="" src="assets/images/ckout_continue_active.gif" alt="Continue">&nbsp;
	</td>
	</tr>
        <tr>
            <td height="5"></td>
        </tr>
	</tbody></table>
</div>                    
                   
                <div id="orderReviewPane_idle" style="display: block;">
                    <div id="ordReviewAccordion" class="accordion_wrapper">
                            <div class="accordion_left"><img src="assets/images/ckout_step_4_inactive.gif" class="checkout_step_inactive"></div>
                            <div class="accordion_right">Review Order Total &amp; Submit Order</div>
                    </div> 
                </div> 
<div id="orderReviewPane_edit" style="display: none;">
	
	<div id="editPaneHeader">
        <table cellspacing="0" cellpadding="0">
        <tbody><tr>
        <td class="edit_pane_header_left"><img hspace="2" src="assets/images/ckout_step_4_active.gif" class="checkout_step_active"></td>
        <td class="edit_pane_header_right"><span class="form_title">Review Order Total &amp; Submit Order</span></td>
        </tr>
        </tbody></table>
    </div>
	<div id="order_summary_review">
            <table>
            <tbody>

                <tr class="summary" id="summaryPaneCartTotalRow">
                        <td id="summaryPaneCartLabel" class="label">Product Total:</td>
                        <td id="summaryPaneCartTotal" width="80">$<?=number_format($order_total, 2)?></td>
                </tr>

                <tr class="summary" id="summaryPaneTaxRow">
                        <td id="summaryPaneTaxLabel" class="label">Tax:</td>
                        <td id="summaryPaneTaxTotal">$0.00</td>
                </tr>	

                <tr class="summary" id="summaryPaneShipRow">
                        <td id="summaryPaneShipLabel" class="label">Shipping &amp; Handling:</td>
                        <td id="summaryPaneShipTotal">$<?=number_format($sh_total,2)?></td>
                </tr>		

                <tr class="summary" id="summaryPaneSubTotalRow">
                        <td id="summaryPaneSubLabel" class="label">Subtotal:</td>
                        <td id="summaryPaneSubTotal">$<?=number_format($order_total+$sh_total, 2)?></td>
                </tr>

                <tr class="summary discount" id="summaryPaneDiscountRow">
                        <td id="summaryPaneDiscountLabel" class="label">Discounts:</td>
                        <td id="summaryPaneDiscountTotal">$<?=number_format($discountTotal, 2)?></td>
                </tr>   	      
	
                <tr class="summary" id="summaryPaneGrandRow">
		<td id="summaryPaneGrandLabel" class="label">Total:</td>
		<td id="summaryPaneGrandTotal">$<?=number_format($order_total + $sh_total - $discountTotal, 2)?></td>
                </tr>
                <tr>
                    <td colspan="2" height="10"><span id="orderSubmit_error" class="error_message"></span></td>
                </tr>
                <tr class="summary">
                    <td colspan="2">
                    <input width="150" type="image" height="28" name="orderSubmit" id="orderSubmit" src="assets/images/ckout_submit_order.gif" alt="Submit Order" />
                    </td>
                </tr>                
            </tbody>
            </table>
                </div>
</div>                    
		</div>
	</div>
                
<!-- Right column-->               
	<div id="right_column">	
            <div id="order_summary_container">
                <div id="order_summary_top">
                    <img width="182" height="30" src="assets/images/ckout_hdr_ordr_sum.gif" />
                </div>
                <div id="order_summary_middle">
                    <table>
	<tbody><tr>
        <th class="qtycheckout">Qty</th>
        <th class="description">Description</th>
        <th class="totalPrice">Total Price</th>
	</tr>
<?php
    if(isset($_SESSION['cart']) && is_array($_SESSION['cart'])){
        $max = count($_SESSION['cart']);
        //$total = 0;
        
        for($i=0;$i<$max;$i++){            
				
            $pid = $_SESSION['cart'][$i]['productid'];
            $qty = intval($_SESSION['cart'][$i]['qty']);
			$fred = intval($_SESSION['cart'][$i]['shipfreq']);

            //retreive product information in database by id
            $result = mysql_query("SELECT product_name, promotion, price FROM x2_products WHERE ID=$pid");
            if ($row = mysql_fetch_assoc($result)) {
?>        
	
		<tr class="lineitem">
			<td class="qtycheckout"><?=$qty/$fred?></td>
			<td class="description">				
				<?=$row['promotion']?>
				<?php if($fred > 1){
					echo "<br/>$fred Month Plan";
				}?>
			</td>
			<td class="totalPrice">$<?=number_format($qty * $row['price']/$fred,2)?></br></td>
		</tr>
		
<?php        
}}}?>
        <tr id="summaryPaneCartTotalRow" class="summary productTotal">
		<td colspan="2" class="label" id="summaryPaneCartLabel">Product Total:</td>
		<td id="summaryPaneCartTotal">$<?=number_format($order_total, 2)?></td>
	</tr>
    
	<tr id="summaryPaneTaxRow" class="summary">
		<td colspan="2" class="label" id="summaryPaneTaxLabel">Tax:</td>
		<td id="summaryPaneTaxTotal">$0.00</td>
	</tr>	
	
	<tr id="summaryPaneShipRow" class="summary">
		<td colspan="2" class="label" id="summaryPaneShipLabel">Shipping &amp; Handling:</td>
		<td id="summaryPaneShipTotal">$<?=number_format($sh_total,2)?></td>
	</tr>		
		
	<tr id="summaryPaneSubTotalRow" class="summary">
		<td colspan="2" class="label" id="summaryPaneSubLabel">Subtotal:</td>
		<td id="summaryPaneSubTotal">$<?=number_format($order_total + $sh_total, 2)?></td>
	</tr>
	
	<tr id="summaryPaneDiscountRow" class="summary discount">
		<td colspan="2" class="label" id="summaryPaneDiscountLabel">Discounts:</td>
		<td id="summaryPaneDiscountTotal">$<?=number_format($discountTotal, 2)?></td>
	</tr>   	      
	
    <tr id="summaryPaneGrandRow" class="summary">
		<td colspan="2" class="label" id="summaryPaneGrandLabel">Total:</td>
		<td id="summaryPaneGrandTotal">$<?=number_format($order_total + $sh_total - $discountTotal, 2)?></td>
	</tr>       
	</tbody></table>
                </div>
                
            </div>
            <div>			
                <div id="checkoutHelpContainer">
                <table class="hint_text">
                <tbody><tr valign="top">
                <td><strong>Need Help?</strong></td>
                <td>&nbsp;</td>
                <td>
                    <table class="hint_text">
                        <tbody>
                            <tr>
                                <td><img width="20" height="20" align="middle" src="assets/images/ckout_help_faq.gif"></td>
                                <td><a target="_blank" href="#" style="color: blue;">View our FAQ's</a></td>
                            </tr>
                            <tr>
                                <td><img width="20" height="15" align="middle" src="assets/images/ckout_help_phone.gif"></td>
                                <td><span id="phNum">1.855.438.6692</span> (USA)</td>
                            </tr>                                                    
                            <tr>
                                <td><img width="20" height="20" align="middle" src="assets/images/ckout_help_email.gif"></td>
                                <td><a href="mailto:info@x2performance.com" style="color: blue;">info@x2performance.com</a></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                </tr>
                </tbody></table>
                </div>
		</div>
	</div>
	<div style="clear: both;"></div>
    </form>
</div>
        </div>
  </div>

</div>
<br clear="all">
<div id="footer">
  <div class="container_16">
    <div id="footersectionone">
      <div class="grid_1">
        <h3><a href="index.html">Home</a></h3>
      </div>
      <div class="grid_3 footermenucontainer">
        <h3><a href="about_us.html">About Us</a></h3>
        <ul class="mainlinks">
            <li><a href="aboutusceomessage.html">CEO Message</a></li>
        </ul>
      </div>
      <div class="grid_3 footermenucontainer">
        <h3><a href="services.html">X<sup>2</sup>PERFORMANCE</a></h3>
        <ul class="mainlinks">
          <li><a href="services.html#science">Science</a></li>
          <li><a href="supplymentfacts.html">Supplement facts</a></li>
          <li><a href="instruction.html">Instructions</a></li>
          <li><a href="pricing.html">Pricing</a></li>
          <li><a href="testimonials.php">Testimonials</a></li>
        </ul>
      </div>
      
      <div class="grid_2">
        <h3><a href="contact_us.html">Contact Us</a></h3>
        <ul class="mainlinks">
          <li><a href="privacy.html">Privacy Policy</a></li>
          <li><a href="terms.html">Terms</a></li>
        </ul>
      </div>
      <div class="grid_2">
        <h3><a href="sport.html">Sport certified</a></h3>
      </div>
      <div class="grid_1">
        <h3><a href="blog.html">Blog</a></h3>
      </div>
      <div class="grid_5" id="socialicons">
        <h3>CONNECT WITH US</h3>
        <a id="twitter" href="http://twitter.com/#!/x2performance" title="Twitter" target="_blank"></a> <a id="facebook" href="http://www.facebook.com/X2PERFORMANCE" title="Facebook" target="_blank"></a> <a id="youtube" href="http://www.youtube.com/user/TEAMX2PERFORMANCE/featured" title="You Tube" target="_blank"></a> <a id="googleplus" href="https://plus.google.com/109519688499936342953/posts" title="Google Plus" target="_blank"></a> </div>
      <div class="clear"></div>
    </div>
    <div id="footersectiontwo"> <span id="footerlogo"></span>
      <h3><span>MAKE IT HAPPEN <sup>®</sup></span><br/>
        PROUDLY MADE IN THE USA &copy; 2012 Advanced Bio Development LLC</h3>
      <span id="footerlogo2"></span> </div>
  </div>
 
</div>
<script type="text/javascript" src="assets/js/menu.js"></script>
</body>
</html>